<script setup>
import {Avatar, Iphone, Location, Tickets} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";
import axios from "axios";
import {inject, reactive, toRefs} from "vue";

const getPath = inject('getPath')
const route = useRoute()
const user = reactive({
      no: '',
      name: '',
      sex: '0',
      age: '',
      phone: '',
      roleId: ''
    }
)
const getUser = () => {
  axios({
    url: `${getPath}getUser`,
    method: "post",
    data: {
      id: localStorage.getItem('id')
    }
  }).then(res => {
    if (res.data.code == 200) {
      user.name = res.data.data.name
      user.sex = res.data.data.sex
      user.phone = res.data.data.phone
      user.no = res.data.data.no
      user.roleId = res.data.data.roleId
    } else {
      alert("获取数据失败")
    }
  })
}
getUser()


const state = reactive({
  fits: ['头像'],
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})

const {fits, url} = toRefs(state)
</script>

<template>
  <div class="personal">
    <div class="demo-fit">
      <div v-for="fit in fits" :key="fit" class="block">
        <span class="title">{{ fit }}</span>
        <el-avatar shape="square" :size="100" :fit="fit" :src="url"/>
      </div>
    </div>
    <el-descriptions
        :title="'欢迎您!'+user.name"
        :column="2"
        border
    >

      <el-descriptions-item label="账号">
        <el-icon>
          <Avatar/>
        </el-icon>
        {{ user.no }}
      </el-descriptions-item>
      <el-descriptions-item label="电话">
        <el-icon>
          <Iphone/>
        </el-icon>
        {{ user.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="性别" :span="2">
        <el-icon>
          <Location/>
        </el-icon>
        <el-tag :type="user.sex==='1'?'primary':'danger'"
                disable-transitions>

          {{ user.sex == 1 ? "男" : "女" }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="角色">
        <el-icon>
          <Tickets/>
        </el-icon>
        <el-tag
            type="success" disable-transitions>
          {{ user.roleId === 0 ? '超级管理员' : (user.roleId === 1 ? '管理员' : '普通账号') }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
.demo-fit {
  display: flex;
  text-align: center;
  justify-content: right;
}

.demo-fit .block {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.demo-fit .title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>